<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar/index";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDictData } from "./utils/hook";
import { ref, watch } from "vue";

import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";

defineOptions({
  name: "SystemDictChild"
});

const props = withDefaults(
  defineProps<{
    selectedDictId?: number;
    selectedDictName?: string;
  }>(),
  {
    selectedDictId: 0,
    selectedDictName: ""
  }
);

const master = ref(props);
const tableRef = ref();

const {
  loading,
  dictId,
  pagination,
  columns,
  dataList,
  reloadData,
  handleAdd,
  handleEdit,
  handleDelete,
  handleChangeCurrentPage,
  handleChangePageSize
} = useDictData();

watch(
  () => props.selectedDictId,
  (newValue, _) => {
    dictId.value = newValue;
    reloadData();
  }
);
</script>

<template>
  <div>
    <PureTableBar
      :title="master.selectedDictName"
      :columns="columns"
      @refresh="reloadData"
    >
      <template #buttons>
        <div>
          <el-button
            type="primary"
            :icon="useRenderIcon('ri:add-fill')"
            :disabled="!master.selectedDictId"
            @click="handleAdd()"
          >
            新增字典条目
          </el-button>
        </div>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <PureTable
          ref="tableRef"
          row-key="id"
          border
          adaptive
          :adaptiveConfig="{ offsetBottom: 126 }"
          align-whole="center"
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-current-change="handleChangeCurrentPage"
          @page-size-change="handleChangePageSize"
        >
          <template #operation="{ row }">
            <div class="flex justify-center items-center">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(EditPen)"
                @click="handleEdit(row)"
              >
              </el-button>
              <el-popconfirm
                title="确认要删除这条数据吗？"
                @confirm="handleDelete(row)"
              >
                <template #reference>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(Delete)"
                  >
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </PureTable>
      </template>
    </PureTableBar>
  </div>
</template>
